<template>
  <demo-section>
    <demo-block title="基础用法">
      <div class="plr16">
        <xc-group-tabs :list="list" unit='元'></xc-group-tabs>
      </div>
    </demo-block>
     <demo-block title="显示更多">
      <div class="plr16">
        <xc-group-tabs :list="list" showLen="3" unit='元'></xc-group-tabs>
      </div>
    </demo-block>
    <demo-block title="2列">
      <div class="plr16">
        <xc-group-tabs :list="list"  rowNum="2"></xc-group-tabs>
      </div>
    </demo-block>
      <demo-block title="根据字符随机排列">
      <div class="plr16">
        <xc-group-tabs :list="list"  rowNum="auto"></xc-group-tabs>
      </div>
    </demo-block>
  </demo-section>
</template>
<script lang="ts">
export default {
  data() {
    return {
      list: [
        {
          key: 1,
          name: '1',
        },
        {
          key: 2,
          name: '2',
        },
        {
          key: 3,
          name: '3',
        },
        {
          key: 4,
          name: '根据字符长度，自适应排列',
        },
      ],
    };
  },
};
</script>
